<template>
	<div class="cs-container">
		<div class="cs-title clear">
			<div class="left">图表</div>
			<div class="right">
				<a href="https://echarts.apache.org/zh/index.html" target="_blank">官方文档</a>
			</div>
		</div>

    <!-- 内容 -->
    <div class="cs-content">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="chart-box" id="__000"></div>
        </el-col>
        <el-col :span="12">
          <div class="chart-box" id="__001"></div>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="chart-box" id="__005"></div>
        </el-col>
        <el-col :span="8">
          <div class="chart-box" id="__006"></div>
        </el-col>
        <el-col :span="8">
          <div class="chart-box" id="__007"></div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="chart-box" id="__0051"></div>
        </el-col>
        <el-col :span="6">
          <div class="chart-box" id="__0061"></div>
        </el-col>
        <el-col :span="6">
          <div class="chart-box"></div>
        </el-col>
        <el-col :span="6">
          <div class="chart-box"></div>
        </el-col>
      </el-row>
   	</div>

	</div>
</template>

<script>
  // https://www.npmjs.com/package/element-resize-detector
  const elementResizeDetectorMaker = require("element-resize-detector");
  const erd = elementResizeDetectorMaker();
	export default {
		name: 'ecahrts',
		data() {
			return {
				
			};
		},
		mounted() {
      console.error('=========================================================================== ECharts')
			// console.log(this.$echarts)
      const __000 = this.charts(this).__000({
        el: '__000'
      });
      this.charts(this).__001({
        el: '__001'
      })
      this.charts(this).__005({
        el: '__005'
      })
      this.charts(this).__006({
        el: '__006'
      })
      this.charts(this).__007({
        el: '__007'
      })
		},
		methods: {
      

      /**
       * 图表
       * @param self | Object
       */
      charts(self) {
        let charts = {
          // 模板
          temp(chart) {
            const option = {

            };
            const myChart = self.$echarts.init(document.getElementById(chart.el));
            myChart.setOption(option);
          },

          // __000
          __000(chart) {
            const option = {
              color: ['#1890FF'],
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#6a7985'
                  }
                }
			        },
              grid: {
                left: '10%',
                right: '5%',
                top: '10%',
                bottom: '12%'
              },
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: [820, 932, 901, 934, 1290, 1330, 1320],
                  type: 'line',
                  smooth: true
                }
              ]
            };
            const myChart = self.$echarts.init(document.getElementById(chart.el));
            myChart.setOption(option);

            // 元素变化
            erd.listenTo(document.getElementById(chart.el), element => {
              myChart.resize();
            });
          },

          __001(chart) {
            const option = {
              color: ['#1890FF'],
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#6a7985'
                  }
                }
			        },
              grid: {
                left: '7%',
                right: '5%',
                top: '10%',
                bottom: '12%'
              },
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  barWidth: 30,
                  data: [120, 200, 150, 80, 70, 110, 130],
                  type: 'bar'
                }
              ]
            };
            const myChart = self.$echarts.init(document.getElementById(chart.el));
            myChart.setOption(option);

            // 元素变化
            erd.listenTo(document.getElementById(chart.el), element => {
              myChart.resize();
            });
          },

          // 001
          __005(chart) {
            const option = {
              color: [ "#EE6666","#FAC858", "#91CB74", "#91CB74","#5470C6", "#73C0DE"],
              title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                // orient: 'vertical',
                bottom: 'bottom',
                type: 'scroll',
              },
              series: [
                {
                  name: 'Access From',
                  type: 'pie',
                  radius: '50%',
                  data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
            const myChart = self.$echarts.init(document.getElementById(chart.el));
            myChart.setOption(option);

            // 元素变化
            erd.listenTo(document.getElementById(chart.el), element => {
              myChart.resize();
            });
          },

          __006(chart) {
            const option = {
              color: [ "#8B12AE","#32d3eb", "#5bc49f", "#feb64d","#ff7c7c", "#9287e7"],
              title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                // orient: 'vertical',
                bottom: '10',
                type: 'scroll',
              },
              series: [
                {
                  name: 'Access From',
                  type: 'pie',
                  radius: ['35%', '50%'],
                  data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
            const myChart = self.$echarts.init(document.getElementById(chart.el));
            myChart.setOption(option);

            // 元素变化
            erd.listenTo(document.getElementById(chart.el), element => {
              myChart.resize();
            });
          },

          __007(chart) {
            const option = {
              color: [ "#8B12AE","#32d3eb", "#5bc49f", "#feb64d","#ff7c7c", "#9287e7"],
              title: {
                text: 'Referer of a Website',
                subtext: 'Fake Data',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                // orient: 'vertical',
                bottom: '10',
                type: 'scroll',
              },
              series: [
                {
                  name: 'Access From',
                  type: 'pie',
                  radius: [0, 50],
                  center: '50%',
                  roseType: 'area',
                  data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            };
            const myChart = self.$echarts.init(document.getElementById(chart.el));
            myChart.setOption(option);

            // 元素变化
            erd.listenTo(document.getElementById(chart.el), element => {
              myChart.resize();
            });
          }
        };

        return charts;
      }
    }
	};
</script>

<style lang="less" scoped>
  .chart-box {
    height: 260px;
    // border: 1px solid red;
    background: white;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .size-watch {
    width: 100%;
    height: 100%;
    position: absolute;
    visibility:hidden;
    margin: 0;
    padding: 0;
    border: 0;
  }
</style>